$width: 360px;
$height: 420px;
.lyric-container-outer {
  position: relative;
  width: $width;
  height: $height;

  & .lyric-options-container {
    position: absolute;
    right: -14px;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transform: translateX(100%);

    & .lyric-option-item {
      &[data-active="true"] {
        color: var(--primaryColor);
      }

      width: 18px;
      height: 18px;

      & svg {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.lyric-container {
  width: $width;
  height: $height;
  overflow-y: auto;
  font-size: 1rem;
  cursor: default;
  position: relative;

  &::-webkit-scrollbar {
    display: none;
  }

  &::-webkit-scrollbar-track {
    background-color: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #999;
    border-radius: 8px;
  }

  &:hover::-webkit-scrollbar {
    display: block;
  }

  &[data-loading="false"] {
    &::before,
    &::after {
      content: "";
      height: calc(180px - 0.5rem);
      display: block;
    }
  }

  & .lyric-item {
    vertical-align: middle;
    text-align: center;
    padding-top: 0.6em;
    padding-bottom: 0.6em;
    font-size: 1em;
    opacity: 0.8;

    &[data-highlight="true"] {
      color: var(--primaryColor);
      font-size: 1.2em;
      font-weight: 600;
      opacity: 1;
    }
  }

  & .lyric-item-translation {
    margin-top: -0.6em;
  }

  & .search-lyric {
    color: var(--linkColor);
    text-decoration: underline;
  }
}

.lyric-ctx-menu--font-container {
  height: 48px;
  width: 100%;
  display: flex;
  align-items: center;

  & .font-size-button {
    width: 36px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-grow: 0;

    & svg {
      width: 1.4rem;
      height: 1.4rem;
    }
  }
  & input {
    flex: 1;
    width: 0;
    text-align: center;
    margin: 0 12px;

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }
  }
}

.lyric-ctx-menu--row-container {
  height: 36px;
  width: 100%;
  display: flex;
  align-items: center;
  padding-left: 12px;
  padding-right: 12px;
  box-sizing: border-box;

  & span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  &:hover {
    background-color: var(--listHoverColor);
  }
}

.lyric-ctx-menu--set-font-title {
  margin-top: 12px;
  font-weight: 600;
  opacity: 0.6;
  font-size: 1rem;
  height: 14px;
  padding-left: 12px;
}
